---
id: inset
title: Inset
---

import { Props, BoxProps } from '../../core/components';

`Inset` renders a container with custom padding.

### Space

```jsx live
const App = () => {
  return (
    <Stack space={4}>
      <Placeholder />
      <Inset space={4}>
        <Placeholder />
      </Inset>
      <Placeholder />
    </Stack>
  )
}

render(<App />)
```

### Vertical

```jsx live
const App = () => {
  return (
    <Stack space={4}>
      <Placeholder />
      <Inset vertical={4}>
        <Placeholder />
      </Inset>
      <Placeholder />
    </Stack>
  )
}

render(<App />)
```

### Horizontal

```jsx live
const App = () => {
  return (
    <Stack space={4}>
      <Placeholder />
      <Inset horizontal={4}>
        <Placeholder />
      </Inset>
      <Placeholder />
    </Stack>
  )
}

render(<App />)
```

### Top

```jsx live
const App = () => {
  return (
    <Stack space={4}>
      <Placeholder />
      <Inset top={4}>
        <Placeholder />
      </Inset>
      <Placeholder />
    </Stack>
  )
}

render(<App />)
```

### Bottom

```jsx live
const App = () => {
  return (
    <Stack space={4}>
      <Placeholder />
      <Inset bottom={4}>
        <Placeholder />
      </Inset>
      <Placeholder />
    </Stack>
  )
}

render(<App />)
```

### Left

```jsx live
const App = () => {
  return (
    <Stack space={4}>
      <Placeholder />
      <Inset left={8}>
        <Placeholder />
      </Inset>
      <Placeholder />
    </Stack>
  )
}

render(<App />)
```

### Right

```jsx live
const App = () => {
  return (
    <Stack space={4}>
      <Placeholder />
      <Inset right={8}>
        <Placeholder />
      </Inset>
      <Placeholder />
    </Stack>
  )
}

render(<App />)
```

### Props

:::info

`Inset` accepts all [`View`](https://reactnative.dev/docs/view) props.

:::

<Props
  data={[
    {
      name: 'space',
      type: 'responsiveProp<float>',
      required: false,
      defaultValue: 0
    },
    {
      name: 'horizontal',
      type: 'responsiveProp<float>',
      required: false,
      defaultValue: 0
    },
    {
      name: 'vertical',
      type: 'responsiveProp<float>',
      required: false,
      defaultValue: 0
    },
    {
      name: 'top',
      type: 'responsiveProp<float>',
      required: false,
      defaultValue: 0
    },
    {
      name: 'right',
      type: 'responsiveProp<float>',
      required: false,
      defaultValue: 0
    },
    {
      name: 'bottom',
      type: 'responsiveProp<float>',
      required: false,
      defaultValue: 0
    },
    {
      name: 'left',
      type: 'responsiveProp<float>',
      required: false,
      defaultValue: 0
    },
  ]} />
